loop（迴圈）意味著在有限的條件下，幫忙重複做多少事的意思。

以下舉基本的for迴圈為範例：

for

以做表格為例，在做網頁設計的時候常需要寫靜態網頁的假資料來進行表格的視覺效果設定，但新增重複的每一列假資料其實非常花費時間而且使網頁看起來冗長而複雜。

例如製作這樣的表格：

<table>
  <tbody>
  <tr><td>班級1</td><td></td><td>座號1</td><td>姓名1</td></tr>
  <tr><td>班級2</td><td></td><td>座號2</td><td>姓名2</td></tr>
  <tr><td>班級3</td><td></td><td>座號3</td><td>姓名3</td></tr>
  <tr><td>班級4</td><td></td><td>座號4</td><td>姓名4</td></tr>
  </tbody>
</table>

範例圖似乎有點短，但假設需要多一點資料的時候是很花費時間而且維護上很麻煩（例如更改內容或新增欄位）。

這時候迴圈可以為我們省下許多做重複事情的時間，這裡與function（函式）不同的地方在於，function是用來寫同樣的程式，然後可以重複利用，而loop是在條件設定下“自動”幫忙重複做事情。

在使用loop的時候請務必要注意條件的設定，不然跑出無限迴圈會使瀏覽器當掉。

接著我們來寫一個簡易的 for loop 看看：

<table id="table"></table>
<script>
  let tableContent = "";
  for(let i = 1; i < 5; i++){
    tableContent += "<tr><td>班級"+i+"</td><td>座號"+i+"</td><td>姓名"+i+"</td></tr>";
    document.getElementById('table').innerHTML = "<tbody>" + tableContent + '</table>';
  };
</script>

上面我們先宣告了變數tableContent等於空字串，接著進入for迴圈設下條件：當i等於1而且小於5(也就是數字不會跑出5來)的時候，i會從1這個數字開始自動加1到遇見5時不執行。

然後使用先前定義的空字串tableContent來賦值，最後再把資料輸出出來。

以上我們節省了許多需要重複輸入的文字以及使1~4的數字自動產生，是不是很方便呢。

for...in

其實 for ... in 不是這樣用的，但是如果要執行出我上面的寫法，可以這樣寫：

<table id="table"></table>
<script>
let tableContent = "";
for(let i = 1; i < 5; i++){
  const grades = { 班級: i }
  const grades2 = { 座號: i}
  const grades3 = { 姓名: i }
  for (let item in grades) {
    for (let item2 in grades2) {
      for (let item3 in grades3) {
        tableContent += "<tr><td>"+item+grades[item]+"</td><td>"+item2+grades2[item2]+"</td><td>"+item3+grades3[item3]+"</td></tr>";
        document.getElementById('table').innerHTML = "<tbody>" + tableContent + '</table>';
      }
    }
  }
};
</script>

它原本的用法是拿來取值，不過溫習了好久我還是搞不懂，所以先暫時擱著，知道有這個東西可以用。

<script>
  const grades = { Tom: 60, Lion: 68, Lili: 85 }
  for (let item in grades) {
      console.log(item+'分數'+grades[item])
  };
</script>

for...of

在ES6中新增了for of，寫法如下：

<script>
const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}
</script>

這篇文章介紹了三種for loop的寫法，但關於loop其實還有更多寫法，請參考相關文章的Loops and iteration，裡面有詳盡的描述。

相關文章：

Loops and iteration

JavaScript迴圈控制方法之 — -for/for…in/forEach